import React,{Component,Fragment,useEffect} from "react";
import store from './store';
import {Provider} from 'react-redux';
import {Layout} from 'antd';
import { BrowserRouter,Routes,Route } from "react-router-dom";
import Head from "./common/header";
import Foot from "./common/footer";
import Remind from "./common/remind";
import Home from "./pages/home";
import User from "./pages/user";
import Money from "./pages/money";
import {connect,useSelector,useDispatch} from 'react-redux';
import * as actionCreator from './store/actionCreator';

const App = (props)=>{
  const dispatch = useDispatch();
  const roomList = useSelector((state)=>{
    return state.app.roomList;
  })
  const getRoomList = ()=>{
    const action = actionCreator.getRoomList();
    dispatch(action)
  }
  const getBellList = ()=>{
    const action = actionCreator.getBellList();
    dispatch(action);
  }
  useEffect(()=>{
    getRoomList();
    getBellList();
    return ()=>{
      fetch('http://49.233.20.202:3001/Room/Update',{
          method:'POST',
          body:JSON.stringify({
              roomList:roomList
          }),
          headers:{'Content-Type':'application/json'}
      })
    }
  },[])
  return(
    <Fragment>
        <Provider store={store}>
          <Layout className="layout">
            {/* <Head/> */}
              <BrowserRouter>
                <Routes>
                  <Route path='/' element={<Head/>}></Route>
                  <Route path='/Home' element={<Home/>}></Route>
                  <Route path='/User' element={<User/>}></Route>
                  <Route path='/Money' element={<Money/>}></Route>
                </Routes>
              </BrowserRouter>
              {props.bellShow?<Remind/>:''}
            <Foot/>
          </Layout>
        </Provider>
      </Fragment>
  )
}
// class App extends Component{
//   constructor(props){
//     super(props);
//   }
//   componentDidMount(){
//     this.props.getRoomList();
//     this.props.getBellList();
//   }
//   render(){
//     return(
//       <Fragment>
//         <Provider store={store}>
//           <Layout className="layout">
//             {/* <Head/> */}
//               <BrowserRouter>
//                 <Routes>
//                   <Route path='/' element={<Head/>}></Route>
//                   <Route path='/Home' element={<Home/>}></Route>
//                   <Route path='/User' element={<User/>}></Route>
//                   <Route path='/Money' element={<Money/>}></Route>
//                 </Routes>
//               </BrowserRouter>
//               {this.props.bellShow?<Remind/>:''}
//             <Foot/>
//           </Layout>
//         </Provider>
//       </Fragment>
//     )
//   }
//   componentWillUnmount(){
//     fetch('http://localhost:3001/Room/Update',{
//         method:'POST',
//         body:JSON.stringify({
//             roomList:this.props.roomList
//         }),
//         headers:{'Content-Type':'application/json'}
//     })
//   }
// }
const mapStateToProps = (state)=>({
  roomList: state.app.roomList,
  bellShow: state.app.bellShow
})
const mapDispatchToProps = (dispatch)=>({
  getRoomList(){
    const action = actionCreator.getRoomList();
    dispatch(action)
  },
  getBellList(){
    const action = actionCreator.getBellList();
    dispatch(action);
  }
})
export default connect(mapStateToProps,mapDispatchToProps)(App);
